<template>
  <el-dialog v-drag append-to-body title="反馈信息" :visible.sync="dialogVisiblef" width="700px" class="feedback-form"
    @close="initCom">
    <el-form ref="form" :model="feedbackForm">
      <el-form-item label="错误类型:" class="faildreson">
        <el-checkbox-group v-model="feedbackForm.type">
          <el-checkbox :label="item.type" v-for="item in typeOfError" :key="item.type">
            {{ item.title }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item class="el-form-item">
        <span slot="label">
          详细描述
          <span class="subhead">(内容不得为空，文字数量不应超过250字)</span>:
        </span>
        <el-input type="textarea" v-model="feedbackForm.com" maxlength="250"></el-input>
      </el-form-item>
      <el-form-item class="el-form-item img-form-itme">
        <span slot="label">
          上传图片
          <span class="subhead">(内容不得超过1MB,类型只限jpg或png)</span>:
        </span>
        <el-upload class="avatar-uploader" :action="actionURL" :show-file-list="false" :on-success="handleAvatarSuccess"
          :http-request="questionHttpRequest" accept="image/jpeg, image/png">
          <img v-if="feedbackForm.pic" :src="feedbackForm.pic" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button class="button button-border-primary" @click="dialogVisiblef = false">取消</el-button>
      <el-button class="button button-bg-primary" @click="submitFeed">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { AC_automatic } from "@/assets/js/ac-automatic";
let dataList = require("@/assets/js/data.json");
import { uploadImage } from "@/api/student";
import { postFeedBack } from "@/api/index";
export default {
  data() {
    return {
      dialogVisiblef: false,
      feedbackForm: {
        type: [],
        com: "",
        pic: "",
        pidtype: "",
        pid: "",
      },
      actionURL: "",
      errorList: [
        {
          type: 1,
          title: "释义错误",
          show: [1],
        },
        {
          type: 2,
          title: "拼写错误",
          show: [1],
        },
        {
          type: 3,
          title: "音标错误",
          show: [1],
        },
        {
          type: 4,
          title: "音频错误",
          show: [1],
        },
        {
          type: 5,
          title: "图片错误",
          show: [1],
        },
        {
          type: 6,
          title: "例句错误",
          show: [1],
        },
        {
          type: 7,
          title: "答案错误",
          show: [2],
        },
        {
          type: 8,
          title: "解析错误",
          show: [2],
        },
        {
          type: 9,
          title: "其他",
          show: [1, 2],
        },
      ],
    };
  },

  computed: {
    typeOfError() {
      return this.errorList.filter((item) => {
        return item.show.indexOf(this.type) != -1;
      });
    },
  },
  props: {
    // 1：单词，句子2：题目
    type: Number,
    //1:单词 2:句子 3:阅读，4：语法
    classify: Number,
    qid: Number,
    questionId: Number,
    parentId: Number,
  },
  methods: {
    initCom() {
      this.feedbackForm = {
        type: [],
        com: "",
        pic: "",
        pidtype: "",
        pid: null,
        parentId: null,
        questionId: null,
      };
      this.$emit("closeDialog");
    },
    visible(id, type, parentId, questionId) {
      this.initCom();
      if (type) {
        this.feedbackForm.pidtype = type;
      } else {
        this.feedbackForm.pidtype = this.type;
      }
      if (id) {
        this.feedbackForm.pid = id;
      } else {
        this.feedbackForm.pid = this.qid;
      }
      if (parentId) {
        this.feedbackForm.parentId = parentId;
      } else {
        this.feedbackForm.parentId = this.parentId;
      }
      if (questionId) {
        this.feedbackForm.questionId = questionId;
      } else {
        this.feedbackForm.questionId = this.questionId;
      }
      this.dialogVisiblef = true;
      this.$emit("openDialog");
    },
    //上传图片
    questionHttpRequest(options) {
      let that = this;
      let formData = new FormData();
      formData.append("img", options.file);
      uploadImage(formData).then((res) => {
        if (res.code == 200) {
          that.feedbackForm.pic = that.assetsURL + res.data;
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.feedbackForm.pic = URL.createObjectURL(file.raw);
    },
    //提交纠错
    submitFeed() {
      if (this.feedbackForm.com.trim() == "") {
        this.$alert("提交内容不允许为空", "消息提示", {
          confirmButtonText: "确定",
          callback: () => { },
        });
        return false;
      } else {
        let data = AC_automatic(
          this.feedbackForm.com.replace(/\s*/g, ""),
          dataList
        );
        if (data.length > 0) {
          this.$alert("提交内容存在敏感词", "消息提示", {
            confirmButtonText: "确定",
            callback: () => { },
          });
          return false;
        }
        let postData = {
          english_word_feedback: {
            title: this.feedbackForm.com,
            word_id: this.feedbackForm.pid,
            parent_id: this.feedbackForm.parentId,
            question_id: this.feedbackForm.questionId,
            icon: this.feedbackForm.pic,
          },
          list: this.feedbackForm.type,
        };
        /**
         * 
         *type=1 classify=1 单词
          type=1 classify=2 句子
          type=2 classify=3 阅读
          type=2 classify=4 语法
          type=2 classify=5 同步练习
         * 
         */
        if (this.type) {
          postData.english_word_feedback.type = this.type;
        }
        if (this.classify) {
          postData.english_word_feedback.classify = this.classify;
        }
        postFeedBack(postData).then((res) => {
          if (res.code == 200) {
            this.$alert("提交成功", "消息提示", {
              confirmButtonText: "确定",
              callback: () => { },
            });
            this.dialogVisiblef = false;
          }
        });
      }
    },
  },
  mounted() { },
};
</script>
